<template>
    <div style="width: 600px;margin: auto;">
        <h1>实例：商品导航和商品列表组件间的通信</h1>
        <div style="float:left;width: 20%;">
            <!--左侧导航组件-->
            <GoodsNav></GoodsNav>
        </div>
        <div>
            <!--右侧导航组件-->
            <GoodsList :list="list"/>
        </div>
    </div>
  </template>
  <script>
  import GoodsList from '@/components/Sample/GoodsList.vue';
  import GoodsNav from '@/components/Sample/GoodsNav.vue';

  export default {
      components:{
        GoodsNav,
        GoodsList
      },
      data(){


        return{
            goods:[{id:'001',name:'香草冰淇淋',cid:'1',src:require('../assets/logo.png')},
            {id:'002',name:'香草冰淇淋',cid:'1',src:require('../assets/logo.png')},
            {id:'003',name:'巧克力冰淇淋',cid:'1',src:require('../assets/logo.png')},
            {id:'004',name:'可颂面包',cid:'2',src:require('../assets/logo.png')},
            {id:'005',name:'香蕉吐司',cid:'2',src:require('../assets/logo.png')},
            {id:'006',name:'德芙巧克力',cid:'3',src:require('../assets/logo.png')},
            {id:'007',name:'好时巧克力',cid:'3',src:require('../assets/logo.png')}
            ],
            list:[]
        }
      },

      mounted(){
        this.list = this.goods.slice()
      }
  }
  </script>